<template>
  <div class="rule-form">
    <div class="rule-form-f">
      <a-form :model="formState" layout="vertical" name="basic" autocomplete="off" @finish="onFinish"
        @finishFailed="onFinishFailed">

        <a-divider orientation="left">考勤规则</a-divider>
        <a-row class="item-row">
          <a-col :span="5">
            <div class="item-text">
              管制部白班
              <a-time-picker class="form-item" v-model:value="formData[ATTENDANCE_CONTROL_DAY_STARTTIME]" value-format="HH:mm" format="HH:mm" />
              -
              <a-time-picker class="form-item" v-model:value="formData[ATTENDANCE_CONTROL_DAY_ENDTIME]" value-format="HH:mm" format="HH:mm" />
            </div>
          </a-col>
          <a-col :span="5">
            <div class="item-text">
              管制部夜班1
              <a-time-picker class="form-item" v-model:value="formData[ATTENDANCE_CONTROL_NIGHT1_STARTTIME]" value-format="HH:mm" format="HH:mm" />
              -
              <a-time-picker class="form-item" v-model:value="formData[ATTENDANCE_CONTROL_NIGHT1_ENDTIME]" value-format="HH:mm" format="HH:mm" />
            </div>
          </a-col>
          <a-col :span="5">
            <div class="item-text">
              管制部夜班2
              <a-time-picker class="form-item" v-model:value="formData[ATTENDANCE_CONTROL_NIGHT2_STARTTIME]" value-format="HH:mm" format="HH:mm" />
              -
              <a-time-picker class="form-item" v-model:value="formData[ATTENDANCE_CONTROL_NIGHT2_ENDTIME]" value-format="HH:mm" format="HH:mm" />
            </div>
          </a-col>
        </a-row>
        <a-row class="item-row">
          <a-col :span="5">
            <div class="item-text">
              运行部白班
              <a-time-picker class="form-item" v-model:value="formData[ATTENDANCE_OPERATION_DAY_STARTTIME]" value-format="HH:mm" format="HH:mm" />
              -
              <a-time-picker class="form-item" v-model:value="formData[ATTENDANCE_OPERATION_DAY_ENDTIME]" value-format="HH:mm" format="HH:mm" />
            </div>
          </a-col>
          <a-col :span="5">
            <div class="item-text">
              运行部夜班1
              <a-time-picker class="form-item" v-model:value="formData[ATTENDANCE_OPERATION_NIGHT1_STARTTIME]" value-format="HH:mm" format="HH:mm" />
              -
              <a-time-picker class="form-item" v-model:value="formData[ATTENDANCE_OPERATION_NIGHT1_ENDTIME]" value-format="HH:mm" format="HH:mm" />
            </div>
          </a-col>
          <a-col :span="5">
            <div class="item-text">
              运行部夜班2
              <a-time-picker class="form-item" v-model:value="formData[ATTENDANCE_OPERATION_NIGHT2_STARTTIME]" value-format="HH:mm" format="HH:mm" />
              -
              <a-time-picker class="form-item" v-model:value="formData[ATTENDANCE_OPERATION_NIGHT2_ENDTIME]" value-format="HH:mm" format="HH:mm" />
            </div>
          </a-col>
        </a-row>
         <a-divider orientation="left">告警规则</a-divider>
        <a-row class="item-row">
          <a-col :span="1">
            <div class="item-text">
              组合席位
            </div>
          </a-col>
          <a-col :span="5">
            <a-input-number v-model:value="formData[VIOLATIONRULE_LEAVEGROUP]" addon-after="分钟"/>
          </a-col>
          <a-col :span="12">
            <div class="item-text">
              已组合的席位在离岗多少分钟时进行告警；
            </div>
          </a-col>
        </a-row>
        <a-row class="item-row">
          <a-col :span="1">
            <div class="item-text">
              未设暂离
            </div>
          </a-col>
          <a-col :span="5">
            <a-input-number v-model:value="formData[VIOLATIONRULE_LEAVETEMPNO_TIME]"  style="width: 64px;margin-right: 108px;" addon-after="分钟"/>
            <a-input-number v-model:value="formData[VIOLATIONRULE_LEAVETEMPNO_NOTICENUM]" style="width: 64px;" addon-after="次"/>
          </a-col>
          <a-col :span="12">
            <div class="item-text">
              未设置暂时离岗的情况下，多少分钟未检测到人员则告警；及警告提醒次数；
            </div>
          </a-col>
        </a-row>
        <a-row class="item-row">
          <a-col :span="1">
            <div class="item-text">
              已设暂离
            </div>
          </a-col>
          <a-col :span="5">
            <a-input-number v-model:value="formData[VIOLATIONRULE_LEAVETEMP_TIME]" addon-after="分钟"/>
          </a-col>
          <a-col :span="12">
            <div class="item-text">
              已设置暂时离岗的情况下，离岗多少分钟未检测到人员回岗则告警；
            </div>
          </a-col>
        </a-row>
        <a-row class="item-row">
          <a-col :span="1">
            <div class="item-text">
              偏离警告
            </div>
          </a-col>
          <a-col :span="5">
            <a-checkbox v-model:checked="formData[`tmp_${VIOLATIONRULE_PHONE_SWITCH}`]" @change="phoneSwitch">手机</a-checkbox>
          </a-col>
          <a-col :span="12">
            <div class="item-text">
              对AI监控模块的设置；
            </div>
          </a-col>
        </a-row>
        <a-row class="item-row">
          <a-col :span="5" offset="1">
            <a-input-number v-model:value="formData[VIOLATIONRULE_PHONE_NOTICENUM]" addon-after="次"/>
          </a-col>
          <a-col :span="12">
            <div class="item-text">
              玩手机警告提醒次数；
            </div>
          </a-col>
        </a-row>
        <a-row class="item-row">
          <a-col :span="1">
            <div class="item-text">
              睡岗警告
            </div>
          </a-col>
          <a-col :span="5">
            <a-input-number v-model:value="formData[VIOLATIONRULE_SLEEP_TIME]"  style="width: 64px;margin-right: 108px;" addon-after="分钟"/>
                        <a-input-number v-model:value="formData[VIOLATIONRULE_SLEEP_NOTICENUM]" style="width: 64px;" addon-after="次"/>
          </a-col>
          <a-col :span="12">
            <div class="item-text">
              趴睡和闭眼超多少分钟时，则告警；及警告提醒次数；
            </div>
          </a-col>
        </a-row>
        <a-row class="item-row">
          <a-col :span="1">
            <div class="item-text">
              宽松提示
            </div>
          </a-col>
          <a-col :span="5">
            <a-time-picker v-model:value="formData[VIOLATIONRULE_ONLYNOTICE_STARTTIME]" style="width: 100px;" value-format="HH:mm" format="HH:mm" />
            -
            <a-time-picker v-model:value="formData[VIOLATIONRULE_ONLYNOTICE_ENDTIME]" style="width: 100px;" value-format="HH:mm" format="HH:mm" />
          </a-col>
          <a-col :span="12">
            <div class="item-text">
              该时段只做警告提示，不做告警记录；
            </div>
          </a-col>
        </a-row>
        <a-row class="item-row">
          <a-col :span="1" offset="1">
            <a-button type="primary" @click="doSave" :loading="loading">保存</a-button>
          </a-col>
         </a-row>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { list, save } from './Rule.api';
import {
ATTENDANCE_CONTROL_DAY_STARTTIME,
ATTENDANCE_CONTROL_DAY_ENDTIME,
ATTENDANCE_CONTROL_NIGHT1_STARTTIME,
ATTENDANCE_CONTROL_NIGHT1_ENDTIME,
ATTENDANCE_CONTROL_NIGHT2_STARTTIME,
ATTENDANCE_CONTROL_NIGHT2_ENDTIME,
ATTENDANCE_OPERATION_DAY_STARTTIME,
ATTENDANCE_OPERATION_DAY_ENDTIME,
ATTENDANCE_OPERATION_NIGHT1_STARTTIME,
ATTENDANCE_OPERATION_NIGHT1_ENDTIME,
ATTENDANCE_OPERATION_NIGHT2_STARTTIME,
ATTENDANCE_OPERATION_NIGHT2_ENDTIME,
VIOLATIONRULE_LEAVEGROUP,
VIOLATIONRULE_LEAVETEMPNO_TIME,
VIOLATIONRULE_LEAVETEMPNO_NOTICENUM,
VIOLATIONRULE_LEAVETEMP_TIME,
VIOLATIONRULE_PHONE_SWITCH,
VIOLATIONRULE_PHONE_NOTICENUM,
VIOLATIONRULE_SLEEP_TIME,
VIOLATIONRULE_SLEEP_NOTICENUM,
VIOLATIONRULE_ONLYNOTICE_STARTTIME,
VIOLATIONRULE_ONLYNOTICE_ENDTIME,
} from '/@/enums/ruleEnum';

const formData = ref({});

const loading = ref(false);

onMounted(async () => {
  let res = await list();
  for (let item of res) {
    formData.value[item.ruleKey] = item.val;
  }
  formData.value[`tmp_${VIOLATIONRULE_PHONE_SWITCH}`] = formData.value[VIOLATIONRULE_PHONE_SWITCH] === '1' ? true : false;
  console.log('formData=', formData.value)
})

function phoneSwitch(e) {
  formData.value[VIOLATIONRULE_PHONE_SWITCH] = e.target.checked ? '1' : '0';
}

async function doSave() {
  // TODO 校验必填
  let ruleList = [];
  for (let key of Object.keys(formData.value)) {
    if (key.startsWith('tmp_')) {
      continue;
    }
    ruleList.push({
      ruleKey: key,
      val: formData.value[key]
    });
  }
  console.log('ruleList=', ruleList);
  loading.value = true;
  await save({
     ruleList: ruleList
  });
  loading.value = false;
}

</script>

<style lang="less" scoped>
[data-theme="dark"] .rule-form {
  background-color: #151515;
}

[data-theme="dark"] .item-text{
  color: #fff !important;
}
[data-theme="dark"] .item-title {
  color: #fff !important;
}

.rule-form {
  background-color: #ffffff;
  padding: 16px;
  width: 100%;
  height: 100%;

  &-f {}

  .form-item {
    width: 100px;
    margin: 0 10px;
  }
  .item-row {
    margin-bottom: 16px;
  }
  .item-text {
    display: flex;
    align-items: center;
    color: #000;
    flex-wrap: wrap;
  }
  .text_indent{
    text-indent: 2ch;
  }
  .item-title {
    display: flex;
    align-items: center;
    color: #000;
    font-weight: 800;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
}

:deep(.ant-picker),
:deep(.ant-input-number) {
  width: 100%;
}
:deep(.ant-row) {
  align-items: center;
}
</style>
